.message {
  @apply text-base rounded border border-solid flex items-center justify-center py-4 mb-2 px-14;
  animation: show-ani 0.2s cubic-bezier(0.39, 0.575, 0.565, 1) both;
  color: #333;
  font-family: PingFang SC;
  &.normal {
    @apply text-white text-base leading-4 border-0;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50px;
  }
  &.error {
    background: #fff0ed;
  }
  &.success {
    border-color: #26a615;
    background: #f0ffe1;
  }
  &.closed {
    animation: hide-ani 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }
  & > * {
    flex-shrink: 0;
  }
  .message-content {
    @apply inline-block text-center;
  }
  .message-icon {
    @apply mr-2;
    width: 18px;
    height: 18px;
  }
}
@keyframes show-ani {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes hide-ani {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50px);
  }
}
